<template>
    <view class="white round-3 pa-20 box mb-16">
        <view class="flex flex-row flex-row-center-between border-b-1 pb-27">
            <view class="text-size-n col text-weight-b">
                <text>卢霞</text><text class="ml-24">154***310</text>
            </view>
            <view class="text-size-m" :style="{ color: '#FF4E4E' }">配送中</view>
        </view>
        <view class="border-b-1 pb-27">
            <view class="flex flex-row flex-row-center-start pt-30">
                <view class="text-size-m c_kd">
                    <text class="col">配送日期：</text>
                    <text class="c_txtlan">2023.8.14 上午</text>
                </view>
                <view style="width: 44rpx;"></view>
                <view class="text-size-m ">
                    <text class="col">配送车辆：</text>
                    <text class="c_txtlan">赣A888888</text>
                </view>
            </view>
            <view class="flex flex-row flex-row-center-start pt-30">
                <view class="text-size-m c_kd">
                    <text class="col">下单日期：</text>
                    <text class="c_txtlan">2023.8.11</text>
                </view>
                <view style="width: 44rpx;"></view>
                <view class="text-size-m">
                    <text class="col">配送司机：</text>
                    <text class="c_txtlan">李知</text>
                </view>
            </view>
        </view>
        <view class="pb-30">
            <view class="pt-23 flex flex-row flex-row-center-start">
                <view class="col text-size-m">住宅情况：</view>
                <view class="flex flex-row flex-row-center-start">
                    <view class="c_taglist">楼梯房</view>
                    <view class="c_taglist">3楼</view>
                </view>
            </view>
            <view class="flex flex-row flex-row-center-start pt-25">
                <view class="col text-size-m">配送金额：</view>
                <view class="c_hong"><text class="text-size-xs">￥</text><text class="text-size-m">475</text>
                </view>
            </view>
        </view>
        <view class="border-t-1 py-24 flex flex-row flex-row-center-end btns">

            <view class="btn ">拨打电话</view>
            <view class="btn ">导航</view>
            <view class="btn redOutlined">结束配送</view>
            <view class="btn redOutlined">开始配送</view>
        </view>
    </view>
</template>

<script setup lang="ts">
</script>
<style lang="less" scoped>
.box{
    box-sizing: border-box;
}
.c_kd {
    width: 336rpx;
}

.c_taglist {
    border: 2rpx solid #006FFF;
    border-radius: 6rpx;
    color: #006FFF;
    font-size: 24rpx;
    padding: 3rpx 20rpx;
    margin-right: 19rpx;
    line-height: 34rpx;
}

.btns {
    gap: 20rpx;
    flex-wrap: wrap !important;

    .btn {
        line-height: 1;
        padding: 16rpx 24rpx;
        font-size: 28rpx;
        border: 1px solid rgba(230, 230, 230, 1);
        color: #484848;
        border-radius: 16rpx;
        flex-shrink: 0;

        &.redOutlined {
            border-color: #FF4E4E;
            color: #FF4E4E;
        }
    }
}
</style>